<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>日报表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="./lib/admin.index.css">
    <link rel="stylesheet" href="./lib/admin.reset.css">
</head>

<body>
    <div id="app" class="container" flex>
        <el-admin-menu :user-detail="userDetail" :menus="menus" @logout="logout">
            <div class="global__content-wrapper">
                <!-- 搜索栏部分 -->
                <div class="global__section-container global__search" style="padding: 20px" flex>
                    <div flex-box="1" class="search-condition" flex>
                        <el-form :model="searchForm">
                            <div flex>
                                <div class="global__search-item" flex="cross:center">
                                    <span class="label">姓名</span>
                                    <div class="search-input">
                                        <el-input v-model="searchForm.username" placeholder="" size="small"></el-input>
                                    </div>
                                </div>
                                <div class="global__search-item" flex="cross:center">
                                    <span class="label">所属公司</span>
                                    <div class="search-input">
                                        <el-select v-model="searchForm.company" placeholder="全部" size="small">
                                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </div>
                                <div class="global__search-item" flex="cross:center">
                                    <span class="label">账号</span>
                                    <div class="search-input">
                                        <el-input v-model="searchForm.account" placeholder="" size="small"></el-input>
                                    </div>
                                </div>
                            </div>
                        </el-form>
                    </div>
                    <div flex-box="0">
                        <el-button type="primary" size="small">筛选</el-button>
                    </div>
                </div>
                <!-- 中间内容部分 -->
                <div class="global__section-container global__main">
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column prop="date" label="日期" sortable width="180">
                        </el-table-column>
                        <el-table-column prop="name" label="姓名" width="180">
                        </el-table-column>
                        <el-table-column prop="address" label="地址">
                        </el-table-column>
                        <el-table-column prop="tag" label="操作" width="150">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="showDialog">修改</el-button>
                                <el-button size="mini">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 脚标部分 -->
                <div class="global__section-container global__footer">
                    <div class="global__pagination-container" style="padding: 20px 0px">
                        <el-pagination @size-change="handleSizeChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </el-admin-menu>

        <!--弹出窗口-->
        <el-dialog title="弹窗样式" :visible.sync="dialogVisiable" width="330px">
            <el-form :model="dialogForm">
                <el-form-item label="名称" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.name" auto-complete="off" style="width: 180px;"></el-input>
                </el-form-item>
                <el-form-item label="键值key" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.key" auto-complete="off" style="width: 180px;"></el-input>
                </el-form-item>
                <el-form-item label="取值value" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.value" auto-complete="off" style="width: 180px;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisiable = false">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</body>

<script src="common/config.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
    window.jQuery || document.write('<script src="//cdn.staticfile.org/jquery/3.1.1/jquery.min.js"><\/script>')
</script>
<script src="./lib/admin.index.js"></script>
<script src="./lib/bundle.js"></script>
<script>
    new Vue({
        el: '#app',
        mixins:[$.base.globalMixin],
        data: function() {
            return {
                /** 搜索框 **/
                searchForm: {
                    orderNum: ''
                },
                options: [{
                    value: '选项1',
                    label: '是'
                }, {
                    value: '选项2',
                    label: '否'
                }],
                /** 弹窗 start **/
                dialogVisiable: false,
                formLabelWidth: '100px',
                dialogForm: {
                    name: '',
                    value: '',
                    key: ''
                },
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                /** 分页start **/
                currentPage4: 0
            }
        },
        created(){
           // 创建组件
        },
        methods: {
            handleSizeChange() {

            },
            handleCurrentChange() {

            },
            showDialog() {
                this.dialogVisiable = true;
            },
            beforeLogout(){
                alert('beforeLogout')
            }
        }
    });
</script>

</html>
